:host {
  height: 100%;
}

.toolbar-user-container {
  height: 100%;
  position: relative;

  .toolbar-user-btn {
    display: flex;
    justify-content: center;
    height: 100%;
    min-width: 160px;

    .avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }

    .name {
      margin: 0 8px 0 10px;
    }

    .icon {
      width: 16px;
      height: 16px;
      font-size: 16px;
      transform: rotate(0);
      transition: transform .25s cubic-bezier(.25,.8,.25,1);
    }

    &.open {
      background: rgba(0, 0, 0, .05);

      .icon {
        transform: rotate(-180deg);
      }
    }
  }

  .dropdown {
    background: white;
    position: absolute;
    top: 64px;
    right: 0;
    width: 100%;
    min-width: 160px;
    z-index: -1;
    transform: translateY(-135%);
    visibility: hidden;
    transition: transform .4s cubic-bezier(.25,.8,.25,1), visibility .4s cubic-bezier(.25,.8,.25,1);

    .content {
      .list {
        .item {
          height: 48px;
          padding: 0 16px;
          position: relative;
          cursor: pointer;
          color: #000;

          .icon {
            padding-right: 12px;
          }
        }
      }
    }

    &.open {
      transform: translateY(0);
      visibility: visible;
    }
  }
}


